<template>
  <div class="container">
    <canvas id="canvas" width="500" height="500" />
    <div>
      <button id="clear">清空画布</button>
      线条粗细
      <select id="selWidth">
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="6">6</option>
        <option value="9">9</option>
      </select>
      线条颜色
      <select id="selColor">
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="pink">pink</option>
        <option value="orange">orange</option>
      </select>
      <button id="imgInfo">保存签名</button>
    </div>

    <div id="imgs" class="imgs" />
  </div>
</template>
<script>
export default {
  name: 'Canvas',
  components: {},
  data() {
    return {
      myCanvas: '',
      ctx: '',
      imgs: ''
    }
  },
  mounted() {
    // 1.获取canvas
    var myCanvas = document.getElementById('canvas')
    this.myCanvas = document.getElementById('canvas')
    // 获取2d对象
    var ctx = myCanvas.getContext('2d')
    // 清空画布
    var clear = document.getElementById('clear')
    // 线条
    var selWidth = document.getElementById('selWidth')
    // 颜色
    var selColor = document.getElementById('selColor')
    // 保存签名
    var imgInfo = document.getElementById('imgInfo')
    // 保存的盒子
    var imgs = document.getElementById('imgs')
    this.imgs = document.getElementById('imgs')
    // 控制线条是否画
    var isMouseMove = false
    // 线条位置
    var lastX, lastY

    var widthVal = selWidth[0].value; var colorVal = selColor[0].value

    initCanvas()
    // 初始化
    function initCanvas() {
      console.log(111)
      // PC端
      var down = (e) => {
        console.log(e, myCanvas.offsetLeft, myCanvas.offsetTop, '??')
        isMouseMove = true
        drawLine(
          event.pageX - myCanvas.offsetLeft,
          event.pageY - myCanvas.offsetTop,
          false
        )
      }
      const move = (e) => {
        if (isMouseMove) {
          drawLine(
            event.pageX - myCanvas.offsetLeft,
            event.pageY - myCanvas.offsetTop,
            true
          )
        }
      }
      const up = (e) => {
        isMouseMove = false
      }
      const leave = (e) => {
        isMouseMove = false
      }
      myCanvas.addEventListener('mousedown', down)
      myCanvas.addEventListener('mousemove', move)
      myCanvas.addEventListener('mouseup', up)
      myCanvas.addEventListener('mouseleave', leave)
    }
    // 画线
    function drawLine(x, y, isT) {
      console.log(x, y, isT)
      if (isT) {
        ctx.beginPath()
        ctx.lineWidth = widthVal // 设置线宽状态
        ctx.strokeStyle = colorVal // 设置线的颜色状态
        ctx.lineCap = 'round'
        ctx.lineJoin = 'round'
        ctx.moveTo(lastX, lastY)
        ctx.lineTo(x, y)
        ctx.stroke()
        ctx.closePath()
      }
      // 每次移动都要更新坐标位置
      lastX = x
      lastY = y
    }

    // 清空画图
    function clearCanvas() {
      imgs.innerHTML = ''
      ctx.beginPath()
      ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
      ctx.closePath() // 可加入，可不加入
    }
    // 线条粗细
    function lineCrude() {
      const activeIndex = selWidth.selectedIndex
      widthVal = selWidth[activeIndex].value
    }
    // 改变颜色
    function setColor() {
      const activeIndex = selColor.selectedIndex
      colorVal = selColor[activeIndex].value
    }
    // 保存图片
    // function saveImgInfo() {
    //   var images = myCanvas.toDataURL('image/png')
    //   imgs.innerHTML = `<img src='${images}'>`
    // }
    clear.addEventListener('click', clearCanvas)
    selWidth.addEventListener('change', lineCrude)
    selColor.addEventListener('change', setColor)
    imgInfo.addEventListener('click', this.saveImgInfo)
  },
  methods: {
    // 保存图片
    saveImgInfo() {
      var images = this.myCanvas.toDataURL('image/png')
      this.imgs.innerHTML = `<img src='${images}'>`
    }
  }
}
</script>
<style scoped>
* {
	margin: 0;
	padding: 0;
}
#canvas {
	border: 1px solid black;
}
</style>
